<template>
  <view class="page-content">
     <!--用户信息-->
      <view class="page-top">
        <view class="page-top-tit">大薇云·灵活用工平台</view>
      </view>
    <view class="page-body">

      <view class="input-group">
        <!--姓名-->
        <view class="input-row">
          <view class="input-row-l">
            <image class="icon-tb" :src="xinghao"></image>
            <view class="input-row-name">姓名</view>
          </view>
          <input class="input-row-w" type="text" v-model="formdata.name" placeholder=""
                 placeholder-style="color:#999"></input>
        </view>
        <!--电话-->
        <view class="input-row">
          <view class="input-row-l">
            <image class="icon-tb" :src="xinghao"></image>
            <view class="input-row-name">电话</view>
          </view>
          <input class="input-row-w" type="number" v-model="formdata.mobile" placeholder=""
                 placeholder-style="color:#999"></input>
        </view>
        <!--验证码-->
        <view class="input-row-code">
          <view class="input-row-code-l">
            <image class="icon-tb" :src="xinghao"></image>
            <view class="input-row-name">验证码</view>
          </view>
          <view class="input-row-code-r">
            <input type="number" class="input-row-w" clearable v-model="formdata.mobile_code" placeholder="" :maxLength="6" placeholder-style="color:#999"></input>
            <button size="mini" :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
          </view>
        </view>
        <!--行业-->
        <view class="input-row">
          <view class="input-row-l">
            <view class="input-row-name">行业</view>
          </view>
          <view class="page-box-label3" @tap="toggleTab">
            <view class="result">{{formdata.industry}}</view>
            <view class="icon-b icons icon-gengduo"></view>
          </view>
        </view>
        <!--公司/团队名-->
        <view class="input-row">
          <view class="input-row-l">
            <view class="input-row-name">公司/团队名</view>
          </view>
          <input class="input-row-w" type="text" v-model="formdata.supplier_alias" placeholder=""
                 placeholder-style="color:#999"></input>
        </view>
        <!--身份证-->
        <view class="input-row-idc">
          <view class="input-row-l">
            <image class="icon-tb" :src="xinghao"></image>
            <view class="input-row-name">身份证</view>
          </view>
          <view class="input-row-r">
            <view class="input-row-r-box">
              <image-upload
                  :max="1" name="file"
                  :chooseNum="1"
                  types="front"
                  v-model="formdata.check_img1"
                  @chooseSuccess="ChooseSuccess"
                  @imgTypes="imgTypes"
                  @imgDelete="imgDelete">
              </image-upload>
            </view>
            <view class="input-row-r-box">
              <image-upload
                  :max="1" name="file"
                  :chooseNum="1"
                  types="back"
                  v-model="formdata.check_img2"
                  @chooseSuccess="ChooseSuccess"
                  @imgTypes="imgTypes"
                  @imgDelete="imgDelete">
              </image-upload>
            </view>
          </view>
        </view>
        <!--银行卡号-->
        <view class="input-row">
          <view class="input-row-l">
            <image class="icon-tb" :src="xinghao"></image>
            <view class="input-row-name">银行卡号</view>
          </view>
          <input class="input-row-w" type="number" v-model="formdata.bank_card" placeholder=""
                 placeholder-style="color:#999"></input>
        </view>
        <!--开户行-->
        <view class="input-row">
          <view class="input-row-l">
            <image class="icon-tb" :src="xinghao"></image>
            <view class="input-row-name">开户行</view>
          </view>
          <input class="input-row-w" type="text" v-model="formdata.bank" placeholder=""
                 placeholder-style="color:#999"></input>
        </view>
      </view>
    </view>
    <view class="btn-row">
      <button type="primary" class="" @tap="confirm">下一步</button>
    </view>

    <!-- 答题卡 -->
    <u-popup class="popup-content" mode='bottom' border-radius="16" v-model="show">
      <view class="header">
        <view class="title">
          <text>行业选择</text>
        </view>
      </view>
      <scroll-view scroll-y="true" class="popup-body">
          <checkbox-group class="popup-box" @change="checkboxChange">
            <label class="popup-ul" v-for="item in industrys" :key="item.value">
              <view class="popup-li">
                <view class="popup-checked">
                  <checkbox style="transform:scale(0.7)"
                            :value="item.category_name"
                            :checked="item.checked"/>
                </view>
                <view class="popup-txt">{{item.category_name}}</view>
              </view>
            </label>
          </checkbox-group>
      </scroll-view>
      <view @tap="comfirmCourse"  hover-class="none" class="footer">选好了</view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import  store  from '@/store'

//上传组件
import imageUpload from '@/components/image-upload/image-upload.vue'
import uPopup from '@/components/u-popup/u-popup'
//接口
import {
  getManagerTypeCateGorys, //行业列表
  smsZcs, //获取验证码
  setManagerSuppliers, //使用manager_id注册数据
  upactivitycheckimgs
} from "@/api/index"
export default {
  components: {
    imageUpload,uPopup
  },
  data() {
    return{
      xinghao:'',
      formdata:{
        manager_id:'1365016271969402881', //商户id //接口-传参 获取地址传参
        name:'', //姓名
        mobile:'', //手机号
        mobile_code:'', //手机验证码
        suplier_category:'', //供应商类别，id，用英文逗号隔开
        supplier_alias:'', //供应商别名，或公司名
        bank_card:'', //银行卡号
        bank:'', //所属银行
        identity_front_img:'',//身份证正面
        identity_reverse_img:'',//身份证反面
        industry:'',
        check_img1:[],
        check_img2:[],
      },
      btnText:'获取验证码', //验证码文本
      btnDis:false, //验证码不可按
      show:false, //弹窗
      industrys: [], //行业列表
      access_token:'', //接口-传参 后台获取参数
      id_card_side:'', //接口-传参
      manager_id:'1365016271969402881', //接口-传参 获取地址传参
      uid:1, //接口-传参 获取地址传参
      is_sel: [], //已选择行业
    }
  },
  computed: {
    ...mapGetters(['userInfo','code','openid'])
  },
  onShow(){

  },
  onLoad(option) {
    console.log(222,option)
    this.getTypeCateGorys();
    this.getToken();

    this.formdata = {
          manager_id:'1365016271969402881', //商户id //接口-传参 获取地址传参
          name:'阿萨德', //姓名
          mobile:'17700084283', //手机号
          mobile_code:'', //手机验证码
          suplier_category:'', //供应商类别，id，用英文逗号隔开
          supplier_alias:'', //供应商别名，或公司名
          bank_card:'6222021402019747879', //银行卡号
          bank:'厦门江头支行', //所属银行
          identity:'', //身份证
          identity_front_img:'',//身份证正面
          identity_reverse_img:'',//身份证反面
          industry:'',
          check_img1:[],
          check_img2:[],
    };
  },

  methods: {
    ...mapActions('user',['setUserInfo','setCode','setOpenid']),
    confirm(){
      let resData = this.formdata;
      if(resData.name===''){
        uni.showToast({
          title: '名字不能为空！',
          duration: 2000,
          icon: "none"
        })
        return
      }
      if(resData.mobile===''){
        uni.showToast({
          title: '电话不能为空！',
          duration: 2000,
          icon: "none"
        })
        return
      }
      if(resData.mobile_code===''){
        uni.showToast({
          title: '验证码不能为空！',
          duration: 2000,
          icon: "none"
        })
        return
      }
      if(resData.identity_front_img===''){
        uni.showToast({
          title: '请上传身份证正面照片！',
          duration: 2000,
          icon: "none"
        })
        return
      }
      if(resData.identity_reverse_img===''){
        uni.showToast({
          title: '请上传身份证反面照片！',
          duration: 2000,
          icon: "none"
        })
        return
      }
      if(resData.bank_card===''){
        uni.showToast({
          title: '银行卡号不能为空！',
          duration: 2000,
          icon: "none"
        })
        return
      }
      if(resData.bank===''){
        uni.showToast({
          title: '开户行不能为空！',
          duration: 2000,
          icon: "none"
        })
        return
      }
      setManagerSuppliers(resData).then(res =>{
        console.log(3331,res)
      })
     // uni.navigateTo({url: '/pages/success/success'});
    },
    //接口获取行业列表
    getTypeCateGorys(){
      getManagerTypeCateGorys({manager_id:this.manager_id}).then(res =>{
        console.log(333,res)
        if(res.code === 1 ){
          this.industrys = res.data;
        }
      })
    },
    //获取Access Token
    getToken(){
      //获取Access Token
      let paramData = {
        grant_type: 'client_credentials',
        client_id:'BDCwyGiYergHAISLMn3DrfrL',
        client_secret:'a0ydooz7oR0IHUQZWXmICbZMxnGTk3aB'
      };
      let url = 'https://aip.baidubce.com/oauth/2.0/token';
      uni.request({
        url: url, //?grant_type=+paramData.grant_type+'&client_id='+paramData.client_id+'&client_secret='+paramData.client_secret, //百度身份证识别接口
        data: paramData,
        success: (res) => {
          console.log(123,res);
          this.access_token = res.data.access_token;
        },fail(err){
          console.log(1233,err);

        }
      });
      /*uni.request({
        url: url,
        type: "post",
        // Form数据
        data: paramData,
        cache: false,
        contentType: false,
        processData: false,
        mimeType: "multipart/form-data",
        success: function (result) {
          var json = JSON.parse(result);
          //      $(event.target).parent().css("background-image", "url(" + getImagePath(json.data) + ")");
          callback(json, imageIndex);
        }
      });*/
    },
    imgTypes(types) {
      console.log(4444,types)
      this.id_card_side = types;
    },
    ChooseSuccess(tempFilePaths) { //选择图片返回
      console.log(4444444,tempFilePaths)
      this.imgUpload(tempFilePaths);
      /*******************************/
    },
    imgDelete(row){
      console.log(3344,row)
      let _self = this;
      upactivitycheckimgs(_self.formdata).then(res =>{
        console.log(777,res)
        if(res.code===1){

        }else{
          uni.showToast({
            title: res.msg,
            duration: 2000,
            icon: "none"
          });
        }
      })
    },
    imgUpload(tempFilePaths) {
      console.log(5555,tempFilePaths)
      let _self = this;
      uni.showLoading({
        title: '上传中'
      });
      let uploadImgs = [];
      tempFilePaths.forEach((item, index) => {
        uploadImgs.push(new Promise((resolve, reject) => {
          let str = 'blob:http://localhost:8080/';
          let imgName= '';
          if(item.indexOf(str)>-1){
            imgName = item.split("blob:http://localhost:8080/")[1]
          }else {
            imgName = item
          }
          //图片上传
          uni.uploadFile({
            url: "http://sc.dtc.zone/upload",
            formData: {
              key: imgName + '.jpg',
              fname:imgName + '.jpg',
            },
            filePath: item,
            name: 'file',
            success: (uploadFileRes) => {
              console.log(555,uploadFileRes)
              resolve(uploadFileRes);
              let _res = JSON.parse(uploadFileRes.data);
              if(_self.id_card_side==='front'){
                _self.formdata.check_img1.push(_res.data.url[0]);
                _self.formdata.identity_front_img = _res.data.url[0];
              }else{
                _self.formdata.check_img2.push(_res.data.url[0]);
                _self.formdata.dentity_reverse_img = _res.data.url[0];
              }

              //接口请求
              uni.request({
                url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token='+ _self.access_token, //百度身份证识别接口
                data: {
                  url: _res.data.url[0],
                  id_card_side: _self.id_card_side
                },
                header: {
                  "Content-Type": "application/x-www-form-urlencoded"
                },
                success: (res) => {
                  if(rees.idcard_number_type===1){
                    if(_self.id_card_side==='front'){
                      _self.formdata.identity = res.data.words_result.公民身份号码.words;
                    }
                  }
                }
              });
            },
            fail: (err) => {
              console.log(err);
              reject(err);
            },
            complete: () => {
              //uni.hideLoading();
            }
          });
        }))
      })
      Promise.all(uploadImgs).then((results) => { //执行所有需请求的接口
        uni.hideLoading();
      })
          .catch((res, object) => {
            uni.hideLoading();
          });
    },
    //行业弹框
    toggleTab(){
      this.show = true;
    },
    //确认行业选择
    comfirmCourse(e){
      this.show = false;
      console.log(77,this.is_sel)
      if(this.is_sel.length>0) {
        let industrys = [];
        let industry = '';
        let industry_ids = [];
        let industry_id = '';
        this.is_sel.forEach(item =>{
          if(item.checked === true){
            industrys.push(item.category_name);
            industry_ids.push(item.id);
          }
        })
        industrys.forEach((item,ind) =>{
          if(ind === industrys.length-1){
            industry += item
          }else {
            industry += item + ','
          }
        })
        industry_ids.forEach((item,ind) =>{
          if(ind === industry_ids.length-1){
            industry_id += item
          }else {
            industry_id += item + ','
          }
        })
        this.formdata.industry = industry;
        this.formdata.suplier_category = industry_id;
        console.log(4,this.formdata)
      }
    },
    checkboxChange(e){
      console.log(4,e)
      // 点击获取行业
      let items = this.industrys,
          values = e.detail.value;
      if(items && items.length>0){
        items.forEach(item => {
          if(values.length > 0){
            if(values.indexOf(item.category_name) >= 0){
              this.$set(item,'checked',true)
            }else{
              this.$set(item,'checked',false)
            }
          }
        })
        this.is_sel = items
      }

    },
    // 发送验证码
    async sendCode() {
      let resdata = this.formdata;
      if (resdata.phone === "") {
        uni.showToast({
          title: "手机号码不能为空！",
          icon: 'none',
          duration: 2000
        })
        return;
      }
      if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(resdata.mobile)) {
        uni.showToast({
          title: "请输入正确的手机号码！",
          icon: 'none',
          duration: 2000
        })
        return;
      }
      smsZcs(resdata).then(res =>{
        if(res.code === 2000){

        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          })
        }
      })
      // 开启倒计时
      this.countDown();
    },
    // 验证码倒计时
    countDown() {
      let t = null;
      let timer = 60;
      this.btnDis = true;
      clearInterval(t);
      this.btnText = `${timer}s`;
      t = setInterval(() => {
        if (timer == 0) {
          clearInterval(t);
          this.btnText = '重新发送';
          this.btnDis = false;
          return;
        }
        timer--;
        this.btnText = `${timer}s`;
      }, 1000)
    },
  }
}
</script>

<style lang="scss">
.empty{
  height: calc(100% - 300rpx)!important;
}
.page-body{
  display: flex;
  flex-direction: column;
  padding-bottom: 140rpx;

  .input-group {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding:0 30rpx;

    .input-row-code {
      width: 100%;
      display: flex;
      align-items: center;
      flex: 1;
      height: 80rpx;
      flex-direction: row;
      background: #fff;
      margin-top: 30rpx;

      .input-row-code-l {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
        .icon-tb{
          width: 18rpx;
          height: 18rpx;
          margin-right: 10rpx;
        }

      }

      .input-row-code-r {
        flex: 35;
        display: flex;
        align-items: center;
        border: 1px solid #DDDDDD;
        border-radius: 8rpx;

        .input-row-w {
          display: flex;
          flex: 1;
          width: 100%;
          color: #333;
          font-size: 28rpx;
          padding:0 20rpx;
        }

        button {
          width: 200rpx;
          height: 80rpx;
          line-height: 80rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
          background: (0,0,0,0);
          border-radius: 0rpx;
          color: #4566FF;
          text-align: right;
        }
        button:after {
           border: none;
        }

      }
    }

    .input-row {
      display: flex;
      align-items: center;
      flex: 1;
      width: 100%;
      height: 80rpx;
      flex-direction: row;
      background: #fff;
      margin-top: 30rpx;
      .page-box-label3 {
        width:calc(100% - 100rpx);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        border: 1rpx solid #ddd;
        border-radius: 8rpx;
        height: 80rpx;
        padding: 0 20rpx;
        .icon-b{
          transform: rotate(90deg);
          color: #999;
        }
        .result{
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          word-break: break-all;
          overflow: hidden;
        }
      }
      .input-row-l{
        display: flex;
        align-items: center;
        margin-right: 20rpx;
        .icon-tb{
          width: 18rpx;
          height: 18rpx;
          margin-right: 10rpx;
        }
        .input-row-name{
          font-size: 32rpx;
          font-weight: 400;
          line-height: 56rpx;
          color: #333333;
        }
      }
      .input-row-w {
        display: flex;
        flex: 1;
        width: 100%;
        height: 80rpx;
        color: #333;
        font-size: 28rpx;
        border: 1px solid #DDDDDD;
        border-radius: 8rpx;
        padding:0 20rpx;
      }
    }
    .input-row-idc {
      display: flex;
      flex-direction: column;
      flex: 1;
      width: 100%;
      height: 300rpx;
      background: #fff;
      margin-top: 30rpx;
      .input-row-l{
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        .icon-tb{
          width: 18rpx;
          height: 18rpx;
          margin-right: 10rpx;
        }
      }
      .input-row-r{
        display: flex;
        align-items: center;
        .input-row-r-box{
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 240rpx;
          border: 1px solid #DDDDDD;
          border-radius: 8rpx;
          margin-right: 40rpx;

        }
        .input-row-r-box:last-of-type{
          margin-right: 0rpx;
        }
      }
    }
  }
}
.btn-row {
  position: fixed;
  height: 100rpx;
  left: 0;
  right: 0;
  bottom: 0;

  button {
    line-height: 100rpx;
    background: #4566FF;
    font-size: 36rpx;
    color: #fff;
    height: 100rpx;
    border-radius: 0;
  }
}
.page-top{
  background-image: url('/static/img/index-bg.png');
  background-repeat:no-repeat;
  background-size: 100% auto;
  display: flex;
  flex-direction: column;
  padding: 0 60rpx;
  height: 380rpx;
  .page-top-tit{
    margin: 90rpx auto 0;
    font-size: 55rpx;
    font-weight: bold;
    line-height: 97rpx;
    color: #FFFFFF;
  }
}
.page-content{
  height:100vh;
  width: 100vw;
}

.popup-content{
  display: flex;
  flex-direction: column;
  .header{
    padding: 40rpx 30rpx 0 30rpx;
    .title{
      text-align: center;
      font-size: 32rpx;
      color: #333;
      font-weight:bold;
      margin-bottom: 40rpx;
      .comfirm-btn{
        color: #2447FF;
        font-size: 28rpx;
        font-weight:500;
        position: absolute;
        right: 30rpx;
      }
    }
  }

  .popup-body{
    display: flex;
    max-height: 700rpx;
    flex-direction: column;
    .popup-box{
      display: flex;
      flex-direction: column;
      .popup-ul{
        display: flex;
        flex-direction: column;
        .popup-li{
          display: flex;
          flex-direction: row;
          border-bottom: 1rpx solid #ddd;
          line-height: 98rpx;
          .popup-checked{
            margin-left: 30rpx;
            margin-right: 10rpx;
          }
          .popup-txt{
            margin-right: 10rpx;
          }
        }

      }
    }
  }
  .note_body{
    width: 100%;
    background:#EDEDED;
    border:2rpx solid #EDEDED;
    border-radius:10rpx;
    margin-bottom: 20rpx;
    .textarea{
      padding: 20rpx;
      font-size: 28rpx;
      width: 100%;
      box-sizing: border-box;
      height:300rpx;
      color: #333;
    }
  }
  .footer{
    height: 88rpx;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
    line-height: 88rpx;
    background:linear-gradient(90deg,#0096FF,#2447FF);
  }
}
</style>
